<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .wrap{
        width: 300px;
        margin: 100px auto 0;
     
    }
    table{
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
        width: 300px;
    }
    th,td{
        border: 1px solid #d0d0d0;
        color: #404040;
        padding: 10px;
    }
    td{
        font: 14px;
    }
    th{
        background-color: #09c;
        font: bold 16px;
        color: #fff;
    }
    tbody tr{
        background-color: #f0f0f0;
    }
    tbody tr:hover{
        cursor: pointer;
        background-color: #fafafa;
    }
</style>
</head>
<body>
    <div class="wrap">

        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll">
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
        <tbody id="j_tb">
              <!-- <tr>
                  <td>
                      <input type="checkbox" >
                  </td>
                  <td>iPhone8</td>
                  <td>8000</td>
              </tr> -->
              <tr>
                <td>
                    <input type="checkbox" >
                </td>
                <td>iPhone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" >
                </td>
                <td>iPhone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>iPhone8</td>
                <td>8000</td>
            </tr>
        </tbody>
    </table>

    </div>
           <script>
                    
                  $(function()
                  {
                          var   p=1;  
                    $("#j_cbAll").bind("click",function()
                      {
                        if(p==1)
                        {
                            $("input").prop("checked",true)
                              p=0;
                        }  
                       
                       else if(p==0)
                        {
                            $("input").prop("checked",false)
                          p=1;
                        }


                       
                    
                     })
                     var j= document.getElementById("j_tb").getElementsByTagName("input");
                         alert(j.length)
                     var len=j.length;    
                         for(var i=0;i<j.length;i++)
                         {
                                j[i].onclick=function()
                      {
                            var flay= true
                      //  alert("sss")
                          for(var k=0;k<len;k++)
                          {
                              alert(10)
                              if(!j[k].checked)
                              {
                               //   alert("ddd")
                                  flay=false;
                                  break;
                              }
                            
                            }
                          $("#j_cbAll").prop("checked",flay)

                      }  
                    }
                  })
           </script>

</body>
</html>